<template>
  <div class="jrgl-child">
    <div class="j-header">
      <h1>职场体验——传媒、营销、科技类项目</h1>
      <h2>Career Exploration--Media/Marketing/STEM</h2>
    </div>
    <table class="tb-tell">
      <tbody>
        <tr class="tell a-tell">
          <td>
            <span> 学 员 姓 名 </span>
            <input type="" name="">
          </td>
          <td>
            <span> 英 文 名 </span>
            <input type="" name="">
          </td>
        </tr>
        <tr class="tell b-tell">
          <td class="b-a-tell">
            <span> 学 校 名 称 </span>
            <input type="" name="">
          </td>
          <td>
            <span> 性 别 </span>
            <select>
              <option>男</option>
              <option>女</option>
            </select>
          </td>
        </tr>
        <tr class="tell c-tell">
          <td class="c-a-tell">
            <span> 所 在 年 级 </span>
            <select>
              <option>六年级</option>
              <option>初一</option>
              <option>初二</option>
              <option>初三</option>
              <option>高一</option>
              <option>高二</option>
              <option>高三</option>
              <option>大一</option>
              <option>大二</option>
              <option>大三</option>
              <option>大四</option>
            </select>
          </td>
          <td>
            <span> 移 动 电 话 </span>
            <input type="" name="">
          </td>
        </tr>
        <tr class="tell d-tell">
          <td>
            <span> Q Q </span>
            <input type="" name="">
          </td>
          <td>
            <span> 电 子 邮 箱 </span>
            <input type="" name="">
          </td>
        </tr>
        <tr class="tell f-tell">
          <td>
            <span> 所 在 地 区 </span>
            <select name="" id="prov"></select>
            <select name="" id="city"></select>
          </td>
        </tr>
        <tr class="tell g-tell">
          <td>
            <span> 家 长 姓 名 </span>
            <input type="" name="">
          </td>
          <td>
            <span> 联 系 方 式 </span>
            <input type="" name="">
          </td>
        </tr>
      </tbody>
    </table>
    <div class="center">
      <h1>请勾选你所感兴趣的项目</h1>
      <table class="tb-cell">
        <tbody>
          <tr class="cell a-cell">
            <td>
              <input type="checkbox">
            </td>
            <td>
              <span>台湾新闻体验项目</span>
            </td>
            <td>
              <span>地点：台湾</span>
            </td>
            <td>
              <span>时间：02/04-02/10</span>
            </td>
          </tr>
          <tr class="cell b-cell">
            <td>
              <input type="checkbox">
            </td>
            <td>
              <span>新加坡酒店管理</span>
            </td>
            <td>
              <span>地点：新加坡</span>
            </td>
            <td>
              <span>时间：02/04-02/10</span>
            </td>
          </tr>
          <tr class="cell c-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>美国时尚产业体验项目</span>
            </td>
            <td>
              <span>地点：美国</span>
            </td>
            <td>
              <span>时间：02/03-02/13</span>
            </td>
          </tr>
          <tr class="cell d-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>新加坡建筑艺术</span>
            </td>
            <td>
              <span>地点：新加坡</span>
            </td>
            <td>
              <span>时间：02/04-02/10</span>
            </td>
          </tr>
          <tr class="cell e-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>韩国影视广告</span>
            </td>
            <td>
              <span>地点：韩国</span>
            </td>
            <td>
              <span>时间：02/07-02/13</span>
            </td>
          </tr>
          <tr class="cell f-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>日本动漫产业</span>
            </td>
            <td>
              <span>地点：日本</span>
            </td>
            <td>
              <span>时间：02/07-02/13</span>
            </td>
          </tr>
          <tr class="cell g-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>北京中影影视传媒项目</span>
            </td>
            <td>
              <span>地点：北京</span>
            </td>
            <td>
              <span>时间：02/04-02/10</span>
            </td>
          </tr>
          <tr class="cell h-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>苏州生物基因工程项目</span>
            </td>
            <td>
              <span>地点：苏州</span>
            </td>
            <td>
              <span>时间：02/04-02/10</span>
            </td>
          </tr>
          <tr class="cell i-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>上海VR尖端科技企业实训</span>
            </td>
            <td>
              <span>地点：上海</span>
            </td>
            <td>
              <span>时间：02/07-02/13</span>
            </td>
          </tr>
          <tr class="cell j-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>上海VR尖端科技企业实训</span>
            </td>
            <td>
              <span>地点：上海</span>
            </td>
            <td>
              <span>时间：02/20-02/26</span>
            </td>
          </tr>
          <tr class="cell k-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>北航无人机创新科技实践项目</span>
            </td>
            <td>
              <span>地点：北京</span>
            </td>
            <td>
              <span>时间：02/04-02/10</span>
            </td>
          </tr>
          <tr class="cell j-cell">
            <td>
              <input type="checkbox" name="">
            </td>
            <td>
              <span>北航无人机创新科技实践项目</span>
            </td>
            <td>
              <span>地点：北京</span>
            </td>
            <td>
              <span>时间：02/20-02/26</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="footer">
      <input type="submit" value=" 点 我 提 交 ">
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello1',
  data() {
    return {
    }
  },
  mounted() {


  
    //定义数组,存放 省的信息
    var prov_list = ['请选择', '国外留学', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔族自治区', '台湾省', '香港特别管理区', '澳门特别行政区'];
    //定义数组, 城市的信息
    var city_list = [];
    city_list[0] = [];
    city_list[1] = ['请选择', '美国', '英国', '法国', '德国', '日本', '韩国', '新加坡'];
    city_list[2] = ['请选择', '东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云县', '延庆县'];
    city_list[3] = ['请选择', '和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区', '宁河县', '静海县', '蓟县'];
    city_list[4] = ['请选择', '石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'];
    city_list[5] = ['请选择', '太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'];
    city_list[6] = ['请选择', '呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'];
    city_list[7] = ['请选择', '沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'];
    city_list[8] = ['请选择', '长春市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'];
    city_list[9] = ['请选择', '哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'];
    city_list[10] = ['请选择', '黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明县'];
    city_list[11] = ['请选择', '南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'];
    city_list[12] = ['请选择', '杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'];
    city_list[13] = ['请选择', '合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'];
    city_list[14] = ['请选择', '福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'];
    city_list[15] = ['请选择', '南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'];
    city_list[16] = ['请选择', '济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'];
    city_list[17] = ['请选择', '郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '信阳市', '商丘市', '周口市', '驻马店市', '济原市'];
    city_list[18] = ['请选择', '武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州', '仙桃市', '潜江市', '天门市', '神农架林区'];
    city_list[19] = ['请选择', '长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'];
    city_list[20] = ['请选择', '广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'];
    city_list[21] = ['请选择', '南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'];
    city_list[22] = ['请选择', '海口市', '三亚市', '三沙市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '宝安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'];
    city_list[23] = ['请选择', '万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '綦江区', '大足区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '潼南县', '铜梁县', '荣昌县', '璧山县', '梁平县', '城口县', '丰都县', '垫江县', '武隆县', '忠县', '开县', '云阳县', '奉节县', '巫山县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'];
    city_list[24] = ['请选择', '成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '京山彝族自治州'];
    city_list[25] = ['请选择', '贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'];
    city_list[26] = ['请选择', '昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'];
    city_list[27] = ['请选择', '拉萨市', '昌都地区', '山南地区', '日喀则地区', '那曲地区', '阿里地区', '林芝地区'];
    city_list[28] = ['请选择', '西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'];
    city_list[29] = ['请选择', '兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'];
    city_list[30] = ['请选择', '西宁市', '海东市', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'];
    city_list[31] = ['请选择', '银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'];
    city_list[32] = ['请选择', '乌鲁木齐市', '克拉玛依市', '吐鲁番地区', '哈密地区', '昌吉回族自治州', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔市', '图木舒克市', '五家渠市'];
    city_list[33] = ['请选择', '台北市', '新北市', '台中市', '台南市', '高雄市', '基隆市', '新竹市', '嘉义市', '桃园县', '苗栗县', '彰化县', '南投县', '云林县', '嘉义县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '金门县', '连江县'];
    city_list[34] = ['请选择', '中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '葵青区', '荃湾区', '屯门区', '元朗区', '北区', '大埔区', '沙田区', '西贡区', '离岛区'];
    city_list[35] = ['请选择', '花地玛堂区', '圣安多尼堂区', '大堂区', '望德堂区', '风顺堂区', '嘉模堂区', '圣方济各堂区', '路氹城'];
    //获取select元素
    var prov_select = document.getElementById('prov');
    var city_select = document.getElementById('city');
    //给 省的选择框  填充数据
    for (var i = 0; i < prov_list.length; i++) {
      //prov_select.innerHTML += "<option>"+prov_list[i]+"</option>"; 

      prov_select.add(new Option(prov_list[i], i));
    }


    //给 省的选择框 绑定 change事件
    prov_select.onchange = function() {
      //当前选择了 那个省
      var index = this.value;
      //取出 该省对应的城市
      var citys = city_list[index];

      console.log(citys.length)
    
    //  如果第二框有值就显示，没有就隐藏
      if(citys.length>0){
        city_select.style.opacity='1';
      }else{
        city_select.style.opacity="0"
      }

      //再填充城市之前 清空 下拉框内容
      city_select.length = 0;

      //把城市信息 填充到 城市的选择框中
      for (var i = 0; i < citys.length; i++) {
        city_select.add(new Option(citys[i], i));
      }

   


    }


    //手工 触发 prov_select 
    prov_select.onchange();

  }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import "../assets/css/style.css";
    .j-header {
        background-image: url(../assets/images/CM-banner.jpg);
        background-size: cover;
    }
    .center h1, .footer h1 {
        border-bottom: 1px solid #2FB2E0;
    }
    .footer input {
        background: #64C1E3;
    }
    .footer input:hover {
        background: #2FB2E0;
    }
</style>
